"use strict"

var baseUrl = "/writer/";

// 设置分步块的状态
function state_change(step, state) {
    Muggle.gets("[step='"+step+"']").setAttribute("state", state);
}
// step1 的过度动作
function handle_step1() {
    state_change(1, "on");
    state_change(2, "off");
    state_change(3, "off");
    Muggle.gets("#form-input[step='1']").style.display = "block";
    Muggle.gets("#right-board").style.display = "block";
    Muggle.gets("#msg-board").style.display = "none";
    Muggle.gets("#note").style.display = "none";
    Muggle.gets("#done2").style.display = "none";
    Muggle.gets("#back2").style.display = "none";
    Muggle.gets("#final-step").style.display = "none";
}
// step2 的过度动作
function handle_step2() {
    state_change(1, "on");
    state_change(2, "on");
    state_change(3, "off");
    Muggle.gets("#form-input[step='1']").style.display = "none";
    Muggle.gets("#right-board").style.display = "none";
    Muggle.gets("#msg-board").style.display = "none";
    Muggle.gets("#note").style.display = "block";
    Muggle.gets("#done2").style.display = "block";
    Muggle.gets("#back2").style.display = "block";
    Muggle.gets("#final-step").style.display = "none";
    
}
// step3 的过度动作
function handle_step3() {
    state_change(1, "on");
    state_change(2, "on");
    state_change(3, "on");
    Muggle.gets("#form-input[step='1']").style.display = "none";
    Muggle.gets("#right-board").style.display = "none";
    Muggle.gets("#msg-board").style.display = "block";
    Muggle.gets("#note").style.display = "none";
    Muggle.gets("#done2").style.display = "none";
    Muggle.gets("#back2").style.display = "none";
    Muggle.gets("#final-step").style.display = "block";
}

// 返回动作
Muggle.gets("#back2").addEventListener("click", function(event) {
    handle_step1();
});
Muggle.gets("#back3").addEventListener("click", function(event) {
    handle_step2();
});

document.addEventListener("DOMContentLoaded", function(event) {
    // 分步块
    Muggle.gets(".step-pice[step='1'] .step-pice-icon").style.cssText += "background: url("+baseUrl+"image/info.png)no-repeat;";
    Muggle.gets(".step-pice[step='2'] .step-pice-icon").style.cssText += "background: url("+baseUrl+"image/content.png)no-repeat;";
    Muggle.gets(".step-pice[step='3'] .step-pice-icon").style.cssText += "background: url("+baseUrl+"image/submit.png)no-repeat;";
    Muggle.gets(".step-pice[step='3']").style.cssText += ";border-right:1px solid #B0C4DE;"

    // 步奏1右侧信息提示版
    var messageBoard = new MessageBoard(Muggle.gets("#right-board"));
    messageBoard.init("36%", 335);  // 大小和宽度最小值(px)
    messageBoard.set({
        title: "请填写您的信息"
    });
    messageBoard.log({
        one: {
            sign: "nomal",
            text: "填写表单后，点击保存按钮进入下一步继续编辑文章内容，稍后，您可以修改或重新编辑文章信息。"
        },
        two: {
            sign: "nomal",
            text: "please save your fuckin information and go die"
        }
    });
    Muggle.gets("#right-board").style.cssText += ";margin-top: 1rem;";

    // 步奏3的提示框
    var messageBoard = new MessageBoard(Muggle.gets("#msg-board"));
    messageBoard.init("36%", 335);  // 大小和宽度最小值(px)
    messageBoard.set({
        title: "选择发布方式"
    });
    messageBoard.log({
        one: {
            sign: "nomal",
            text: "上传后，您可以在[我的文章]里看到您的作品"
        },
        two: {
            sign: "nomal",
            text: "首页将会轮流展示您的作品，如果不想展示，请选择[私密发布]"
        }
    });
    Muggle.gets("#right-board").style.cssText += ";margin-top: 1rem;";

    // 按钮样式
    var bigbutton_hover = function(event) {
        this.style.cssText += ";background: #6495ED;color:#fff;"
    };
    var bigbutton_out = function(event) {
        this.style.cssText += ";background: #fff;color:#333;"
    };
    Muggle.gets("#send-pre").addEventListener("mouseover", bigbutton_hover);
    Muggle.gets("#send-pub").addEventListener("mouseover", bigbutton_hover);
    Muggle.gets("#send-pre").addEventListener("mouseout", bigbutton_out);
    Muggle.gets("#send-pub").addEventListener("mouseout", bigbutton_out);

    // 页面功能
    var title;  // 标题
    var intro;  // 简介
    var sign;  // 关键字
    var type;  // 分类
    (title = Muggle.gets('[name="title"]')).placeholder = "输 入 标 题";
    (intro = Muggle.gets('[name="intro"]')).placeholder = "输 入 简 介";
    (sign = Muggle.gets('[name="sign"]')).placeholder = "输 入 关 键 字";
    
    Muggle.gets("#done").addEventListener("click", function(event) {
        if (Muggle.empty(title.value)) {
            alert("请输入文章标题~");
            return 0;
        }
        if (title.value.length > 20) {
            alert("标题不能超过20字哦～");
            return 0;
        }
        if (Muggle.empty(intro.value)) {
            alert("请输入文章简介~");
            return 0;
        }
        if (intro.value.length > 100) {
            alert("标题不能超过100字哦～");
            return 0;
        }
        if (Muggle.empty(sign.value)) {
            alert("请填写关键字~");
            return 0;
        }
        var radio = Muggle.checkedRadio("type");
        if (radio == null) {
            alert("请选择文章分类~");
            return 0;
        }

        // 保存
        Muggle.catch.link("form_info");  // 建表
        Muggle.catch.update("title", title.value);
        Muggle.catch.update("intro", intro.value);
        Muggle.catch.update("sign", sign.value);
        Muggle.catch.update("type", radio.value);
        handle_step2();  // 切换到第二步

    });

    var note = new MuggleNote({
        dom: Muggle.gets("#note"),
        minHeight: 300
    });
    Muggle.gets("#done2").addEventListener("click", function(event) {
        var text = note.Content();
        if (Muggle.empty(text)) {
            alert("请填写文章内容");
            return 0;
        }
        Muggle.catch.update("content", note.Content());
        handle_step3();  // 切换到第三步
        Muggle.catch.show();
    });

    // 请求上传
    var sendPre = Muggle.gets("#send-pre");
    var sendPub = Muggle.gets("#send-pub");
    var net_requist = function(node) {
        node.addEventListener("click", function(event) {
            var mode = this.attr("mode");  // 私密0, 公开1
            // 请求
            Muggle.Net({
                method: "post",
                url: "/api/?cmd=view",
                data: {
                    title: Muggle.catch.select("title")[0],
                    intro: Muggle.catch.select("intro")[0],
                    sign: Muggle.catch.select("sign")[0],
                    type: Muggle.catch.select("type")[0],
                    content: Muggle.catch.select("content")[0],
                    mode: mode
                },
                cookie: false,
                type: "json",
                success: function(data) {
                    console.log(data);
                    if (data.code < 0) {
                        alert(decodeURIComponent(data.data.mess));
                    } else {
                        alert("发布成功~");
                    }
                    return 0;
                },
                faild: function(e) {
                    console.log(e);
                    alert("系统繁忙，请稍后再试~")
                }
            });
        });
    }
    net_requist(sendPre);
    net_requist(sendPub);
});